<script setup>

import {userTokenStore} from "@/stores/token.js";
import {computed, onMounted, ref} from "vue";
import {getUserReq, logoutReq} from "@/api/user.js";
import {userInfoStore} from "@/stores/userinfo.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {Edit, EditPen, Lock, Management, Promotion, Search, User, UserFilled} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import router from "@/router/router.js";
import {getCategoryReq} from "@/api/fiction.js";

import { useRoute } from 'vue-router'
const route = useRoute()
const routerKey = computed(() => {
  return route.path+Math.random()
})



const userStore = userInfoStore();
const userToken = userTokenStore()

const categories = ref([])

const query = ref('')

//搜索小说
const searchFictions = () => {
    console.log("搜索" + query.value)
    router.push({ path: `/searchFictionList`, query: { query: query.value } });
}


// 装载后
onMounted(() => {
    //用户信息显示
    getUserReq().then((resp) => {
        //返回用户信息进行存储
        userStore.setUserInfo(resp.data)
    })
    getCategories()
})

const handleCommand = (command) => {
    if (command === 'logout') {
        ElMessageBox.confirm(
            '确认要退出吗',
            '温馨提醒',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async () => {

                //删除后端token
                let result = await logoutReq();
                //发送退出请求
                ElMessage.success(result.message)
                //清空缓存
                userStore.removeUserInfo()
                userToken.removeToken()
                //跳转登录页面
                await router.push('/login')
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '退出取消',
                })
            })
    } else {
        router.push('/user/' + command)
    }
}

//获取小说分类
const getCategories = async () => {
  //获取小说分类
  let cresult = await getCategoryReq()
  categories.value=cresult.data

  console.log(cresult.data);
}


</script>

<template>
    <div class="common-layout">
        <el-container class="common-layout">
            <!-- 头部区域 -->
            <el-header class="header">
                <!-- 搜索框 -->
              <div id="logo">
                <img style='height: 50px' src="https://zzw-handsome.oss-cn-beijing.aliyuncs.com/da06a907-1b4e-4186-94fb-f65e684b74d4.png"/>
                <h1>正版小说网</h1>
              </div>
              <el-col :span="8">
                <div class="search_box" >
                  <el-input
                      v-model="query"
                      style="max-width: 600px"
                      placeholder="请输入要查询的小说名"
                      class="input-with-select"
                  >
                    <template #append>
                      <el-button  @click="searchFictions" :icon="Search" />
                    </template>
                  </el-input>
                </div>
              </el-col>
              <el-col :span="2">
                <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown-link">
        <!--              当前用户头像-->
                      <el-avatar :src="userStore.getUserInfo().userPic"></el-avatar>
                    </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="info">更换头像</el-dropdown-item>
                                <el-dropdown-item command="password">修改密码</el-dropdown-item>
                                <el-dropdown-item command="info">个人资料</el-dropdown-item>
                                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-col>
            </el-header>
            <el-container>
                <!-- 侧边栏 -->
                <el-aside width="200px">
                    <el-menu
                        :default-active="activeIndex"
                        class="el-menu-demo"
                        :ellipsis="false"
                        router
                    >
                        <el-sub-menu index="1">
                            <!--            一级标题-->
                            <template #title>
                                <el-icon><User/></el-icon>
                                <span>个人信息</span>
                            </template>
                            <!--            二级目录-->
                            <el-menu-item index="/user/info">
                                <el-icon><UserFilled/></el-icon>
                                <span>个人资料</span>
                            </el-menu-item>
                            <el-menu-item index="/user/password">
                                <el-icon><Lock/></el-icon>
                                <span>修改密码</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-menu-item index="/fiction/category">
                            <el-icon><EditPen/></el-icon>
                            <span>我的小说分类</span>
                        </el-menu-item>
                        <el-sub-menu index="2">
                            <!--            一级标题-->
                            <template #title>
                                <el-icon><Management/></el-icon>
                                <span>我的收藏</span>
                            </template>
                            <el-menu-item index="/fiction/manage">
                                <el-icon></el-icon>
                                <span>所有小说</span>
                            </el-menu-item>
                          <el-menu-item v-for="item in categories"  index="/fiction/manage"
                                        :route="{name:'FictionManage',query:{id:item.id }}">
                            <el-icon></el-icon>
                            <span>{{item.categoryName}}</span>
                          </el-menu-item>

                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <!-- 主体部分 -->
                <el-main class="Main">
                    <router-view :key="routerKey"/>
                </el-main>
            </el-container>

        </el-container>
    </div>
</template>

<style scoped>
.common-layout {
    height: 100vh;
}

.header {
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.el-menu-demo {
  height: 100vh;
  background: rgba(0, 0, 0, 0.15);
}

.Main{
  background: rgba(0, 0, 0, 0.05);
}


.el-menu-demo el-menu-item {
    width: 100px;
}
.search_box{
  display: flex;
}
.sub el-menu-item{
  background: rgba(0, 0, 0, 0.15);
}
#logo {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 50px;
  }
}
</style>